<template>
	<view class="box-main">

		<!-- 内容输入区域 -->
		<view v-if="options.mode == 0">
			<view style="height: 30vh;">
				<textarea v-model="form.content" :maxlength="options.type == 'fee' ? '800' : '200' "
					style="width: 100%;height: 100%;" :placeholder="placeholder" />
			</view>
			<view class="mt-10 mla wfc">
				<text v-if="options.type == 'fee' " class="fs-26"
					style="color: #BBBBBB;">{{form.content.length}}/800</text>
				<text v-if="options.type == 'free' " class="fs-26"
					style="color: #BBBBBB;">{{form.content.length}}/200</text>
			</view>
		</view>
		<view class="" v-if="options.mode == 4">
			<view style="height: 20vh;" class="shadow-2 p-20">
				<textarea v-model="form.content" maxlength="400" style="width: 100%;height: 100%;"
					placeholder="我能提供的资源：" />
			</view>
			<view style="height: 20vh;margin-top: 40rpx;" class="shadow-2 p-20">
				<textarea v-model="form.gainDesc" maxlength="400" style="width: 100%;height: 100%;"
					placeholder="我需要的资源：" />
			</view>
			<view class="mt-10 mla wfc">
				<text class="fs-26"
					style="color: #BBBBBB;">{{(form.gainDesc.length) + (form.content.length)}}/800</text>
			</view>
		</view>
		<!-- end -->


		<!-- 图片上传 -->
		<view v-if="options.type == 'fee' " class="mt-30">
			<text class="c-999 fs-26">tips:拖动排序</text>
			<drag-image  v-model='imgList'>
				<template v-slot:upload>
					<view v-if="imgList.length < 9" @click.stop="uploadImg" class='box-upload'>
						<text class='iconfont icon-icon25201 fw' style="font-size: 60rpx;color: #C0C4CC;"></text>
						<view class="fw" style="color: #C0C4CC;">上传图片</view>
					</view>
				</template>
			</drag-image>
		</view>
		<!-- end -->

		<view style="height: 180rpx;"></view>

		<!-- 保存 -->
		<view class="box-save">
			<view @click="saveClick" class="box-submit">
				保存
			</view>
		</view>
		<!-- end -->


	</view>
</template>

<script>
	import dragImage from '@/pages/extend/components/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue'
	export default {
		components:{
			dragImage
		},
		data() {
			return {
				placeholder: '',
				options: {},
				uploadUrl: '',
				header: {},
				imgList: [],
				form: {
					content: '',
					gainDesc: '' // 
				}
			}
		},
		onLoad(options) {
			this.options = options;

			if (options.page == '个人信息') {
				this.placeholder = `请输入个人信息简介`;
				this.form.content = this.cardObj.individual.content;
				this.imgList = this.cardObj.individual.img;
			}
			if (options.page == '企业简介') {
				this.placeholder = `请输入企业简介`;
				this.form.content = this.cardObj.enterprise.content;
				this.imgList = this.cardObj.enterprise.img;
			}
			if (options.page == '产品和服务') {
				this.placeholder = `请输入产品和服务描述`
				this.form.content = this.cardObj.products.content;
				this.imgList = this.cardObj.products.img;
			}
			if (options.page == '供需发布') {
				this.placeholder = `请输入供需发布简介`
				this.form.content = this.cardObj.demand.content;
				this.form.gainDesc = this.cardObj.demand.gainDesc;
				this.imgList = this.cardObj.demand.img;
			}

		},
		computed: {
			cardObj() {
				return this.$store.state.extend.cardObj;
			}
		},
		methods: {
			preViewImg(item, index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				})
			},
			uploadImg() {
				if (this.imgList.length == 9) {
					uni.showToast({
						title: '最多只能上传9张图片',
						icon: 'none'
					})
					return;
				}

				this.$util.uploadImageOne({
					url: 'upload/image',
					count: 9
				}, (res) => {
					if (Array.isArray(res)) {
						this.imgList = [...this.imgList, ...res]
					}
				});
			},
			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			saveClick() {
				let obj = {};
				if (this.options.page == '个人信息') {
					if (this.form.content == '' && this.imgList.length == 0) {
						// uni.showToast({
						// 	title: '至少输入一项内容，图片或文字',
						// 	icon: 'none'
						// })
						// return;
						obj = {
							...this.$store.state.extend.cardObj,
							individual: {
								content: this.form.content || '',
								img: this.imgList || [],
								is_val: false
							}
						}
					}else{
						obj = {
							...this.$store.state.extend.cardObj,
							individual: {
								content: this.form.content,
								img: this.imgList,
								is_val: true
							}
						}
					}

					
				}
				if (this.options.page == '企业简介') {
					if (this.form.content == '' && this.imgList.length == 0) {
						// uni.showToast({
						// 	title: '至少输入一项内容，图片或文字',
						// 	icon: 'none'
						// })
						// return;
						obj = {
							...this.$store.state.extend.cardObj,
							enterprise: {
								content: this.form.content || '',
								img: this.imgList || [],
								is_val: false
							}
						}
					}else{
						obj = {
							...this.$store.state.extend.cardObj,
							enterprise: {
								content: this.form.content,
								img: this.imgList,
								is_val: true
							}
						}
					}
					
				}
				if (this.options.page == '产品和服务') {
					if (this.form.content == '' && this.imgList.length == 0) {
						// uni.showToast({
						// 	title: '至少输入一项内容，图片或文字',
						// 	icon: 'none'
						// })
						// return;
						obj = {
							...this.$store.state.extend.cardObj,
							products: {
								content: this.form.content || '',
								img: this.imgList || [],
								is_val: false
							}
						}
					}else{
						obj = {
							...this.$store.state.extend.cardObj,
							products: {
								content: this.form.content,
								img: this.imgList,
								is_val: true
							}
						}
					}
					
				}
				if (this.options.page == '供需发布') {
					if (this.form.content == '' && this.imgList.length == 0) {
						// uni.showToast({
						// 	title: '至少输入一项内容，图片或文字',
						// 	icon: 'none'
						// })
						// return;
						obj = {
							...this.$store.state.extend.cardObj,
							demand: {
								content: this.form.content || '',
								gainDesc: this.form.gainDesc || '',
								img: this.imgList || [],
								is_val: false
							}
						}
					}else{
						obj = {
							...this.$store.state.extend.cardObj,
							demand: {
								content: this.form.content,
								gainDesc: this.form.gainDesc,
								img: this.imgList,
								is_val: true
							}
						}
					}
				}
				this.$store.commit("SET_CardObj", obj);
				uni.navigateBack();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box-upload {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 220rpx;
		height: 220rpx;
		background-color: #F4F5FA;
		border-radius: 8rpx;
	}

	.box-for-img {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20rpx;
	}

	.box-submit {
		border-radius: 8rpx;
		background-color: #00009E;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
	}

	.box-save {
		z-index: 999;
		border-radius: 8rpx;
		color: white;
		font-weight: bold;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 10rpx;
		width: 95%;
		margin-left: 50%;
		transform: translateX(-50%);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); ///兼容 IOS<11.2/
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); ///兼容 IOS>11.2/
		height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

	}

	.box-submit:active {
		opacity: .6;
	}

	.box-main {
		background-color: white;
		padding: 20rpx;
	}
</style>